<template>
    <div>
        <!-- 卡片一：扫二维码 -->
        <div class="card bg-light mt-3">
            <div class="card-body d-flex">
                <img :src="params.user_weixin_url" width="120px" alt="">
                <div class="ms-5">
                    <p>&bull; 技术干货分享</p>
                    <p>&bull; 免费资料领取</p>
                    <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
                </div>
            </div>
        </div>

        <!-- 卡片二：联系方式 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr />
                <p>QQ: {{ params.user_weixin_no }}</p>
                <p>邮箱: {{ params.user_email }}</p>
            </div>
        </div>

        <!-- 广告图 -->
        <img class="mt-3" :src="params.ad_url" alt="" style="height: 130px; width: 100%;">

        <!-- 卡片三：文章分类 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />

                <p v-for="(obj, index) in countByArticleType">
                    <a :href="'blog-classify.html?' + obj.articleTypeId"
                        class="card-link text-decoration-none text-primary">
                        {{ obj.articleTypeName }} <span style="color: gray">({{ obj.articleTypeNum }})</span>
                    </a>
                </p>
            </div>
        </div>

        <!-- 卡片四：归档 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
                <p v-for="obj in countByArticleCreateTime">
                    <a :href="'blog-archives.html?' + obj.articleCreateTime"
                        class="card-link text-decoration-none text-primary">
                        {{ obj.articleCreateTime }} <span style="color: gray">({{ obj.articleCreateTimeNum }})</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {

    // 数据
    data() {
        return {
            // 文章类型的文章数量的数据
            countByArticleType: [],

            // 创建时间的文章数量的数据
            countByArticleCreateTime: [],

            // 参数数据
            params: {},

        }
    },

    // 方法
    methods: {
        // 获取文章类型的文章数量
        getCountByArticleType() {
            this.$http.get("/article/countByArticleType").then(res => {
                // 给文章类型的文章数量的数据赋值
                this.countByArticleType = res.data;
            })
        },

        // 获取创建时间的文章数量
        getCountByCreateTime() {
            this.$http.get("/article/countByArticleCreateTime").then(res => {
                // 给创建时间的文章数量的数据赋值
                this.countByArticleCreateTime = res.data;
            })
        },

        // 获取参数数据
        getParams() {
            this.$http.get("/param/getParams").then(res => {
                // 给参数数据赋值
                this.params = res.data;
            })
        }

    },

    // 钩子函数
    mounted() {
        // 获取文章类型的文章数量
        this.getCountByArticleType();

        // 获取创建时间的文章数量
        this.getCountByCreateTime();

        // 获取参数数据
        this.getParams();
    }
}
</script>

<style></style>